<template>
    <div>
        <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)" />
        <div class="container">
            <div class="tree-wrap">
                <a-input-search style="margin-bottom: 8px" placeholder="搜索物料编码/名称" v-model="code" @search="searchTree"/>
                <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :tree-data="treeData" :replaceFields="replaceFields"  @expand="onExpand" @select="selectTree" ></a-tree>
            </div>
            <div class="table-wrap">
                <DataTable rowKey="id" :showConfig="false" :tableData="Data" :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'
@Component
export default class unitConfig extends Vue {
    ratio:any = 0
    code:any = ''
    expandedKeys: any[] = []
    tree_id:any = ''
    timer:any = null
    Data: any[] = []
    coeffList:any[] = [{
        label: '全部',
        value: 0
    },
    {
        label: '当前系数为1',
        value: 1
    }, {
        label: '当前系数不为1',
        value: 2
    }]
    searchForm: any = {
        searchValue: '',
        ratio: 0
    };
    get filterData () {
        return {
            searchValue: {
                label: '关键词',
                type: 'input',
                template: {
                    placeholder: '搜索物料编码/名称',
                    clearable: true
                }
            },
            ratio: {
                label: '筛选',
                type: 'select',
                width: 200,
                template: {
                    placeholder: '请选择',
                    clearable: true,
                    filterable: true,
                    options: this.coeffList
                }
            }
        };
    }
    treeData:any[] = []
    autoExpandParent: boolean = true
    replaceFields: any = {
        children: 'child',
        title: 'codeName',
        key: 'id'
    }
    tableColumn: any = {
        code: {
            label: '物料分类编码',
            width: 120
        },
        name: {
            label: '物料分类名称',
            width: 120
        },
        measdocName: {
            label: '物料单位',
            width: 100
        },
        settingUnit: {
            label: '标准计量单位',
            width: 100
        },
        convertRatio: {
            label: '当前系数',
            width: 100
        },
        changeUnit: {
            label: '编辑转换系数',
            width: 100,
            type: 'input',
            placeholder: '请输入',
            callback: this.handlechange
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    };
    init () {
        this.getTree()
        this.getDataList(this.tree_id)
    }
    searchTree () {
        this.getTree()
    }
    // 获取树型结构
    getTree () {
        this.$api.goodsNcMaterielTypeListFetch({code: this.code}).then((res) => {
            if (res.code === 0) {
                this.treeData = res.data
            }
        }).catch()
    }
    // 获取右边的表格
    getDataList (id:any) {
        let data = {
            page: this.pageConfig.current,
            size: this.pageConfig.pageSize,
            code: this.searchForm.searchValue,
            id: id,
            ratio: this.searchForm.ratio
        }
        this.$api.assetSettingNcMaterielFetch(data).then(res => {
            if (res.code == 0) {
                this.Data = res.data.records
                this.pageConfig.total = res.data.total
            }
        }).catch()
    }
    // 修改系数
    handlechange (val:any) {
        let that = this
        if (val.changeUnit != '') {
            let obj = {
                materialId: val.id,
                convertRatio: val.changeUnit
            }
            // 防抖
            clearTimeout(this.timer)
            that.timer = setTimeout(() => {
                that.$api.assetSettingUpdateConvertRatioFetch(obj).then(res => {
                    if (res.code == 0) {
                        that.getDataList(this.tree_id)
                    }
                }).catch()
            }, 500);
        }
    }
    selectTree (selectedKeys: any) {
        this.getDataList(selectedKeys[0])
        this.tree_id = selectedKeys[0]
    }
    onExpand (expandedKeys: any[]) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        if (val == 1) {
            this.getDataList('')
        } else {
            this.getDataList(this.tree_id)
        }
    }
}
</script>
<style lang="scss" scoped>
.container{
    display: flex;
    justify-content: space-between;
    overflow: scroll;
    .tree-wrap{
        width: 200px;
        margin-top: 20px;
    }
    .table-wrap{
        width: calc(100% - 250px);
    }
}

</style>
